<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>外边距</title>
		<!--内部样式-->
		<style>
			*{    /* 通配符：初始化所有标签的内边距和外边距*/
				margin: 0;
				padding: 0;
			}
			.box{     /* 类选择器 */
				width: 300px;
				height: 300px;
				background-color: green;
				margin-bottom: 120px;
				/* margin:50px auot; */
			}
			.box2{
				width: 300px;
				height: 300px;
				background-color: pink;
				margin-top: 80px;
			}
			.bigbox{
				width: 600px;
				height: 600px;
				background-color: deepskyblue;
				margin-top: 100px;
				/* border: 1px solid black;
				padding-top: 100px; */
				overflow: hidden;  /* 隐藏 */
			}
			.sbox{
				width: 300px;
				height: 300px;
				background-color: plum;
				margin-top: 100px;
			}
		</style>
		<!-- 外边距：margin 
		1.概念：盒子与盒子之间的距离
		2.应用：
		  （1）可以让块级盒子水平居中，前提条件是盒子有宽度，再给左右外边距设置为auot(自动的)
		   (2)初始化所有标签的内外边距。
		3.相邻块级盒子垂直外边距合并问题 > 一般再开发中只给其中一个盒子写外边距。
		4.嵌套块级盒子外边距塌陷问题 > 
		   (1)给父盒子添加边框(border)
		   (2)给父盒子添加内边距(padding-top)，但会撑大盒子
		   (3)给父盒子添加overflow:hidden;(开发中常用的)
		-->
	</head>
	<body>
		<div class="box"></div>
		<div class="box2"></div>
		<div class="bigbox">
			<div class="sbox"></div>
		</div>
	</body>
</html>
